<form
    data-amplify-form
    data-amplify-authenticator-setup-email
    (submit)="onSubmit($event)"
    (input)="onInput($event)"
>
    <fieldset
        [class]="classNames(ComponentClassName.Flex, 'amplify-authenticator__column')"
        data-amplify-fieldset
        [disabled]="authenticator.isPending"
    >
        <amplify-slot
            name="setup-email-header"
            [context]="context"
        >
            <h3 [class]="classNames(ComponentClassName.Heading, 'amplify-heading--3')">{{ headerText }}</h3>
        </amplify-slot>
        <amplify-base-form-fields route="setupEmail"></amplify-base-form-fields>

        <button
            amplify-button
            variation="primary"
            fullWidth="true"
            type="submit"
            [isDisabled]="authenticator.isPending"
        >
            {{ confirmText }}
        </button>
        <button
            amplify-button
            size="small"
            variation="link"
            fontWeight="normal"
            fullWidth="true"
            (click)="authenticator.toSignIn()"
        >
            {{ backToSignInText }}
        </button>
        <amplify-error *ngIf="authenticator.error">
            {{ authenticator.error }}
        </amplify-error>
    </fieldset>
    <amplify-slot
        name="setup-email-footer"
        [context]="context"
    ></amplify-slot>
</form>